Как вставить большую картинку?

[ruslan-ok]

Есть html страница, 990 пикс по ширине.

Мне нужно вставить туда картинку. Но, картинка большая - 3000 на 2000 пикс.

<img src="images.jpg" width="3000" height="2000">

Как это сделать? Чтобы не нарушить дизайн страница - чтобы страница не растянулась на километр...

Можно применить полосу прокрутки, но я не знаю как.

Желательно, чтобы полоса прокрутки появилась только когда она нужна, а на маленьких картинках была не видна.

Фреймы не нужны.

Спасибо всем.

[wwt]

добавь свой img в div с overflow:auto и задай ему размеры http://jsfiddle.net/t9fMW/1/

Edited August 14, 2012 by wwt

[ruslan-ok]

Я плохо знаю html, может Вы поможете мне с кодом... Спасибо, конечно.

добавь свой img в div с overflow:auto и задай ему размеру

[wwt]

Я плохо знаю html, может Вы поможете мне с кодом... Спасибо, конечно.

добавь свой img в div с overflow:auto и задай ему размеру

<div style="overflow:auto;width:300px;height:300px;"><img src="images.jpg" width="3000" height="2000"></div>

[ruslan-ok]

Спасибо! Работает.

Можно еще вопрос?

Как сделать полосы прокрутки по красивее. Вот тут нравится, синяя полоса:

http://ruseller.com/lessons.php?rub=2&id=61

Если можно, то соедините с первым кодом, чтоб было закончено... Спасибо!

[wwt]

По вашей ссылке написано что и как, просто скопировать и вставить оттуда к себе вы я думаю в состоянии. Но замечу стилизация скроллбаров таким способом не валидна и работает не во всех браузерах.

Edited August 14, 2012 by wwt

[ruslan-ok]

Спасибо!

Но возникла такая проблема - не только полоса на картинке стала синей - но и вообще общая полоса на ОКНЕ стала синяя... Нельзя ее сделать обычной?

[wwt]

<div class="myscroll" style="overflow:auto;width:300px;height:300px;"><img src="images.jpg" width="3000" height="2000"></div>

а в коде с того сайта замените слово body на .myscroll

[ruslan-ok]

Получилось наоборот - само окно осталось синим, а полосы около картинки стали обычными...

[wwt]

<style> 
.myscroll { 
scrollbar-face-color:#5997CA; 
scrollbar-shadow-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #5997CA;
scrollbar-darkshadow-color: #5997CA; 
scrollbar-track-color: #F6F6F6;
scrollbar-arrow-color: #F6F6F6; 
overflow:auto;
width:300px;
height:300px;
} 
</style>
<div class="myscroll"><img src="images.jpg" width="3000" height="2000"></div>

Edited August 14, 2012 by wwt